<template>
	<div>
		<a-input class="input" :default-value="timeVal" @change="changeVal" />
		<a-select class="select" :defaultValue="time" @change="handleChange">
			<a-select-option value="day">天</a-select-option>
			<a-select-option value="hour">小时</a-select-option>
			<a-select-option value="minute">分钟</a-select-option>
		</a-select>
		<a-popover>
			<template slot="content">
				<p class="p">用户需在窗口期内完成漏斗步骤，才记为转化。否则，认为是流失</p>
			</template>
			<i class="iconfont icon-help" />
		</a-popover>
	</div>
</template>
<script lang="ts">
//
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({
	name: 'WindowPeriod',
	components: {}
})
export default class extends Vue {
	@Prop() defaultData!: number
	private dataSource = this.defaultData
	private time = 'day'
	private timeVal!: number

	created() {
		this.generateData()
	}

	private changeVal(e: any) {
		this.timeVal = e.target.value
		switch (this.time) {
			case 'data':
				this.dataSource = this.timeVal * 86400
				return
			case 'hour':
				this.dataSource = this.timeVal * 3600
				return
			case 'minute':
				this.dataSource = this.timeVal * 60
				return
		}
	}
	private handleChange(value: string) {
		switch (value) {
			case 'day':
				this.time = 'day'
				this.dataSource = this.timeVal * 86400
				return
			case 'hour':
				this.time = 'hour'
				this.dataSource = this.timeVal * 3600
				return
			case 'minute':
				this.time = 'minute'
				this.dataSource = this.timeVal * 60
				return
		}
	}
	// 生成input渲染的value
	private generateData() {
		if (this.dataSource % 86400 && this.dataSource / 86400 > 1) {
			this.timeVal = this.dataSource / 86400
			this.time = 'day'
		} else if (this.dataSource % 3600 && this.dataSource / 3600 > 1) {
			this.timeVal = this.dataSource / 3600
			this.time = 'hour'
		} else {
			this.timeVal = this.dataSource / 60
			this.time = 'minute'
		}
	}

	@Watch('dataSource')
	private changeWindowPeriod() {
		this.$emit('changeWindowPeriod', this.dataSource)
	}
}
</script>

<style lang="scss" scoped>
.input {
	width: 60px;
	margin-right: 8px;
}
.select {
	width: 70px;
	margin-right: 8px;
}
.p {
	width: 220px;
}
</style>
